<template>
	<view class="indent">
		<view class="top">
			<u-button @click="skip" type="success" v-if="role==3" shape="circle" size="mini" style="position: absolute;">管理员入口</u-button>
			<view class="useInfo">
				<view class="head"><open-data type="userAvatarUrl"></open-data>
					<!--<view class="wanName"><open-data style="font-size: 30rpx;font-weight: bolder;" type="userNickName"></open-data></view>-->
				</view>
			</view>
			<view class="tab">
				<u-tabs-swiper ref="tabs" :list="list" @change="tabsChange" active-color="#fed940" inactive-color="black" :is-scroll="false" :current="activeNum"></u-tabs-swiper>
			</view>
		</view>
		
		<view class="list" v-if="order.length&&activeNum!==3">
			<view  class="card" v-for="(val,index) in order" :key="val.id" @click="getDetails(val.id)">
				<view class="tile">
					<text class="express">{{val.express.name}}</text>
					<text class="time">{{$u.timeFrom(val.ctime,false)}}</text>
				</view>
				<view class="content">
					<u-steps :list="status" active-color="#fed940" :current="query.status"></u-steps>
					<view class="bottom">
						<view class="time" style="display: flex;justify-content:space-between;">
							<u-icon name="clock" :label="'订单时间:'+$u.timeFormat(val.ctime, 'yyyy-mm-dd hh:MM')" color="#999" size="46"></u-icon>
							<u-icon name="rmb-circle" :label="'金额:'+val.amount" color="#999" size="46"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="order.length&&activeNum==3">
			<view  class="card" v-for="(val,index) in order" :key="val.id" @click="getDetails(val.id)">
				<view class="tile">
					<text class="express">{{val.express.name}}</text>
					<text class="time">{{$u.timeFrom(val.ctime,false)}}</text>
				</view>
				<view class="content">
					<u-steps :list="status" active-color="#fed940" :current="val.pay_status==5?1:2"></u-steps>
					<view class="bottom">
						<view class="time" style="display: flex;justify-content:space-between;">
							<u-icon name="clock" :label="'订单时间:'+$u.timeFormat(val.ctime, 'yyyy-mm-dd hh:MM')" color="#999" size="46"></u-icon>
							<u-icon name="rmb-circle" :label="'金额:'+val.amount" color="#999" size="46"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kong" v-if="order.length==0">
			<u-empty text="暂无数据" mode="order"></u-empty>
		</view>
		<view class="details">
			<u-popup @close='clear' :closeable="true" v-model="show" mode="bottom" :border-radius="20">
				<view class="title"><u-icon name="file-text-fill" size="38"></u-icon>订单详情</view>
				<view class="content">
					<u-cell-group title="个人信息">
						<u-cell-item icon="account-fill" :icon-size='50' :center='true' title="姓名" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="Details.name" :value-style="{'font-size':'30rpx'}" :arrow="false"></u-cell-item>
						<u-cell-item icon="phone-fill" :icon-size='50' :center='true' title="电话" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="Details.mobile" :value-style="{'font-size':'30rpx'}" :arrow="false"></u-cell-item>
						<u-cell-item icon="map-fill" :icon-size='50' :center='true' title="地址" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="Details.address" :value-style="{'font-size':'30rpx'}" :arrow="false"></u-cell-item>
					</u-cell-group>
					<u-cell-group title="取件信息">
						<u-cell-item icon="car-fill" :icon-size='50' :center='true' title="快递公司" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="Details.express_name" :value-style="{'font-size':'30rpx'}" :arrow="false"></u-cell-item>
						<u-cell-item icon="chat-fill" :icon-size='50' @click="openNote" :center="false" title="取件信息" label="点击修改信息" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="Details.message" :value-style="{'font-size':'30rpx'}"/>
					</u-cell-group>
					<view v-if="activeNum==0" class="refund"><u-button @click="refund" size="medium" type="success">申请退款</u-button></view>
				</view>
			</u-popup>
			
		</view>
		
		<!--修改信息-->
		<view class="updata">
			<u-popup :closeable="true" v-model="upDataShow" mode="bottom" :border-radius="20">
				<view class="title"><u-icon name="edit-pen-fill" size="38"></u-icon>修改订单</view>
				<view class="input2">
					<u-field
						type="textarea"
						icon="chat-fill"
						v-model="newNote"
						label="信息"
						placeholder="请填修改信息"
					/>
				</view>
				<view class="upQue"><u-button @click="updata" size="medium" type="success">修改信息</u-button></view>
			</u-popup>
		</view>
		
		<!--申请退款信息-->
		<view class="updata">
			<u-popup :closeable="true" v-model="refundShow" mode="bottom" :border-radius="20">
				<view class="title"><u-icon name="edit-pen-fill" size="38"></u-icon>退款原因</view>
				<view class="input2">
					<u-field
						type="textarea"
						icon="chat-fill"
						v-model="refundXin"
						label="信息"
						placeholder="请填退款原因"
					/>
				</view>
				<view class="upQue"><u-button @click="tuikua" size="medium" type="success">申请</u-button></view>
			</u-popup>
		</view>
</view>
</template>
<script>
	import {ordeList,getDetailsData,upDataNote,reimburse,refundData} from 'request/orde.js'
	export default {
		data() {
			return {
				activeNum:0,
				show:false,
				newNote:'',
				refundXin:'',//申请退款信息
				refundShow:false,
				upDataId:null,
				upDataShow:false,
				list: [{
					name: '已接单'
				}, {
					name: '待派件'
				}, {
					name: '已完成'
				},{
					name: '退款单'
				}],
				status:[{
					name: '下单'
				}, {
					name: '已接单'
				}, {
					name: '待派中'
				}, {
					name: '完成'
				}],
				status1:[{
					name: '下单'
				}, {
					name: '已接单'
				}, {
					name: '待派中'
				}, {
					name: '完成'
				}],
				status2:[{
					name: '下单'
				}, {
					name: '退款中'
				}, {
					name: '退款完成'
				}],
				order:[],
				Details:null,
				query:{
					pageSize:5,
					status:1,
					pay_status:2
				},
				//身份
				role:null
			};
		},
		methods:{
			//切换
			tabsChange(index) {
				if(index==3){
					this.activeNum = index;
					this.status=this.status2
					this.$set(this.query,'pay_status',5)
					this.$set(this.query,'status',1)
					this.getRefund()
				}else{
					this.activeNum = index;
					this.status=this.status1
					this.$set(this.query,'pay_status',2)
					this.$set(this.query,'status',index+1)
					this.getOrdeList()
				}
				
			},
			//获取订单信息
			getOrdeList(){
				uni.showLoading({
				    title: '加载中'
				});
				ordeList(this.query).then(res=>{
					if(res[1].data.code==200){
						uni.hideLoading()
						uni.showToast({
						    title: '成功',
						    duration: 600
						});
						this.order=res[1].data.data.data
					}else{
						uni.showToast({
						    title: '获取数据失败',
							icon:"loading",
						    duration: 1000
						});
					}
					
				})
			},
			//获取退款的数据
			getRefund(){
				refundData(this.query.pageSize).then(res=>{
					this.order=res
					console.log(res)
				})
			},
			//获取订单详情
			getDetails(id){
				this.upDataId=id
				getDetailsData(id).then(res=>{
					if(res[1].data.code=200){
						this.show=true
						this.Details=res[1].data.data
					}else{
						uni.showToast({
						    title: '获取信息失败',
							icon:"loading",
						    duration: 1000
						});
					}
				})
			},
			//修改短信数据
			openNote(){
				if(this.activeNum==0){
					this.upDataShow=true
				}else{
					uni.showToast({
					    title: '已取件不可修改',
						image:"../../static/ico/warn2.png",
					    duration: 1500
					});
				}
			},
			updata(){
				upDataNote(this.upDataId,this.newNote).then(res=>{
					if(res[1].data.code==200){
						uni.showToast({
						    title: '修改成功',
							image:"../../static/ico/correct.png",
						    duration: 1500
						});
						this.$set(this.Details,'message',this.newNote)
						this.upDataShow=false
					}else{
						uni.showToast({
						    title: '修改失败',
							image:"../../static/ico/error.png",
						    duration: 1500
						});
					}
				})
			},
			//清楚newNote
			clear(){
				this.newNote=''
				this.refundXin=''
			},
			//申请退款
			refund(){
				this.refundShow=true
			},
			tuikua(){
				if(this.refundXin){
					reimburse(this.upDataId,this.refundXin).then(res=>{
						if(res[1].data.code==200){
							uni.showToast({
							    title: '申请成功',
								image:"../../static/ico/correct.png",
							    duration: 1500
							});
							this.refundShow=false
						}else{
							uni.showToast({
							    title: '申请失败',
								image:"../../static/ico/warn2.png",
							    duration: 1500
							});
						}
					})
				}else{
					uni.showToast({
					    title: '请填写退款原因',
						image:"../../static/ico/warn2.png",
					    duration: 1500
					});
				}
			},
			
			//跳转到管理员页面
			skip(){
				uni.navigateTo({
				    url: '../admin/admin'
				});
			}
		},
		
		onLoad(){
			this.role=uni.getStorageSync('role')
		},
		onShow(){
			if(this.activeNum==3){
				this.getRefund()
			}else{
				this.getOrdeList()
			}
			
		},
		onReachBottom(){
			var number=this.query.pageSize+5
			this.$set(this.query,'pageSize',number)
			if(this.activeNum==3){
				this.getRefund()
			}else{
				this.getOrdeList()
			}
			
		}
	}
</script>

<style lang="scss">
.indent{
	.top{
		height: 174rpx;
		background-color: #fed940;
		margin-bottom: 70rpx;
		.useInfo{
			display:flex;
			justify-content: center;
			margin-bottom: 10rpx;
			.head{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 4rpx solid #ffff;
				overflow: hidden;
			},
			.wanName{
				
			}
		}
		.tab{
			box-shadow: 5rpx 5rpx 5rpx #C0C0C0;
			margin: 0 60rpx;
			border-radius: 50rpx;
			overflow: hidden;
		}
	}
}
.card{
	box-shadow: 5rpx 5rpx 16rpx #C0C0C0;
	border-radius: 40rpx;
	margin: 10rpx 40rpx;
	margin-bottom: 56rpx;
	background-color: #fffff;
	.tile{
		padding: 10rpx;
		border-bottom: 1px solid #c8c7cc;
		display: flex;
		justify-content: space-between;
		.express{
			font-size: 30rpx;
			font-weight: bolder;
		}
		.time{
			color: #999;
		}
	}
	.content{
		padding: 10rpx 0;
		.bottom{
			padding:10rpx 20rpx;
		}
		
	}
}
.details .title,.updata .title{
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	padding-top: 10rpx;
}
.content{
	.refund{
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
	}
}
.updata .upQue{
	display: flex;
	padding: 20rpx 0;
	justify-content: center;
}
page{
		background-color: #f8f8f8;
	}
</style>
